<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>长龙航空</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body class="MainBodyBg bodyFontSize">
<div class="container padTop20">
    <div class="row MainSerList ">
        <div class="col-xs-3 col-lg-3 padLR10"><a href="http://www.taobao.com"><img src="img/checkin.png" class="img-responsive center-block"><p class="text-center">在线选座</p></a> </div>
        <div class="col-xs-3 col-lg-3 padLR10"><img src="img/order.png" class="img-responsive center-block"><p class="text-center">我的订单</p></div>
        <div class="col-xs-3 col-lg-3 padLR10"><img src="img/flightdata.png" class="img-responsive center-block"><p class="text-center">航班动态</p></div>
        <div class="col-xs-3 col-lg-3 padLR10"><img src="img/helper.png" class="img-responsive center-block"><p class="text-center">旅行助手</p></div>
    </div>
</div>

<script>
    $(function () {
        var postUrl = {
            Type: "Function",
            Content: {url: location.href},
            To: {
                Target: "main",
                Func: "setFrameUrl",
                Serial: ""
            },
            From: {
                Source: "",
                Func: "",
                Serial: ""
            }
        };
        window.parent.postMessage(postUrl, '*');

        var baseWidth=$(window)[0].width;
        var baseFontSize=10;
        if(320<baseWidth<375){
            baseFontSize=10;
        }else if(375<=baseWidth<414){
            baseFontSize=12;
        }else if(639<=baseWidth<414){
            baseFontSize=13;
        }else {
            baseFontSize=20;
        }
        var layoutRegistration = {
            home: {
                pageCount: 3,
                pageData: [{
                    pageId: "pageBanner",
                    pageUrl: "http://172.25.1.35:199/bannerPage.html",
                    pageHeight: 144
                },{
                    pageId: "pageSearch",
                    pageUrl: "http://172.25.1.35:199/searchPage.html",
                    pageHeight: 344
                },{
                    pageId: "pageServeList",
                    pageUrl: "http://172.25.1.35:199/serveListPage.html",
                    pageHeight: 148
                },{
                    pageId: "pageAdvert",
                    pageUrl: "http://172.25.1.35:199/serveListPage.html",
                    pageHeight: 148
                }]
            },
            service: {
                pageCount: 1,
                pageData: [
                    {
                        pageId: "pageService",
                        pageUrl: "http://172.25.1.35:199/bannerPage.html",
                        pageHeight: 144
                    }
                ]
            },
            info: {
                pageCount: 1,
                pageData: [
                    {
                        pageId: "pageService",
                        pageUrl: "http://172.25.1.35:199/bannerPage.html",
                        pageHeight: 144
                    }
                ]
            }
        };
        window.parent.postMessage(layoutRegistration, '*');
        // 获取手指在轮播图元素上的一个滑动方向（左右）

        // 获取界面上轮播图容器
        var $carousels = $('.carousel');
        var startX, endX;
        // 在滑动的一定范围内，才切换图片
        var offset = 50;
        // 注册滑动事件
        $carousels.on('touchstart', function (e) {
            // 手指触摸开始时记录一下手指所在的坐标x
            startX = e.originalEvent.touches[0].clientX;

        });
        $carousels.on('touchmove', function (e) {
            // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
            endX = e.originalEvent.touches[0].clientX;
        });
        $carousels.on('touchend', function (e) {
            //console.log(endX);
            //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
            //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
            var distance = Math.abs(startX - endX);
            if (distance > offset) {
                //说明有方向的变化
                //根据获得的方向 判断是上一张还是下一张出现
                $(this).carousel(startX > endX ? 'next' : 'prev');
            }
        });
        //自动播放
        $('.carousel').carousel({
            interval: 3000
        });
        $("#test1").click(function () {
            var postdata = {
                Type: "Function",
                Content: {data: 1},
                To: {
                    Target: "main",
                    Func: "HandleDemo",
                    Serial: ""
                },
                From: {
                    Source: "",
                    Func: "",
                    Serial: ""
                }
            };

            window.parent.postMessage(postdata, '*');
        })
    });
    /*window.addEventListener('message', function (e) {
        if (e.source != window.parent) return;
        alert(e.data);
    }, false);*/
</script>
</body>
</html>
